<script>
import avatar from "@/components/avatar.vue"
import wechatPayIcon from "../wechatPay.svg"
import personIcon from "../person.svg"
import cloudIcon from "../cloud.svg"
import { getShowImage } from "@/utils"
import groupIcon from "../group.svg"
import numberUtils from "@/utils/numberUtils"

export default {
  name: "teamInfo",
  components: { avatar },
  data() {
    return {
      wechatPayIcon,
      personIcon,
      cloudIcon,
      groupIcon,
    }
  },
  computed: {
    numberUtils() {
      return numberUtils
    },
    //截断的头像列表，头像列表长度超过2个时只展示前面两个，没超过时原样返回
    truncatedAvatarList() {
      if (this.teamInfo && this.teamInfo.groupBuyUsers) {
        return this.teamInfo.groupBuyUsers.slice(0, 2)
      }
      return []
    },
  },
  props: {
    teamInfo: Object,
    commodityIcon: String,
  },
  // watch: {
  //   teamInfo: {
  //     handler() {
  //       console.log(this.teamInfo, "this.teamInfo")
  //     },
  //     immediate: true,
  //   },
  // },
  emits: ["takeOrder", "close"],
  methods: {
    getShowImage,
    open() {
      this.$refs["team-info-popup"].open()
    },
  },
}
</script>

<template>
  <!--		选择成团人数-->
  <uni-popup ref="team-info-popup" type="bottom" :safe-area="false" :is-mask-click="false">
    <view class="choose-team-member-count-popup popup-content" v-if="teamInfo">
      <view class="popup-header">
        <view
          class="close-btn"
          @click="
            () => {
              $refs['team-info-popup'].close()
              $emit('close')
            }
          "
          >取消</view
        >
        <view
          class="primary-btn"
          @click="
            () => {
              $emit('takeOrder')
              $refs['team-info-popup'].close()
            }
          "
          >立即购买</view
        >
      </view>

      <view class="content">
        <!--				拼团说明-->
        <view class="info">
          <view class="title">拼团说明</view>
          <view class="content">
            <image class="icon" :src="wechatPayIcon"></image>
            <text class="text">提交订单.....</text>
            <image class="icon" :src="personIcon"></image>
            <text class="text">邀请好友加入冲刺班.....</text>
            <image class="icon" :src="cloudIcon"></image>
            <text class="text">拼团成功</text>
          </view>
        </view>
        <!--				拼团进度-->
        <view class="block">
          <view class="title">
            <image class="icon" :src="groupIcon"></image>
            ta的成团进度
          </view>
          <view class="d-flex flex-column align-center">
            <!--							当前拼团人数-->
            <view class="status-text">
              <text>当前</text>
              <text class="number">{{ teamInfo.commodityGroupBuy.personNum - teamInfo.lackNum }}</text>
              <text>人，再邀</text>
              <text class="number">{{ teamInfo.lackNum }}</text>
              <text>人即可拼团成功</text>
            </view>
            <!--							拼团用户头像列表-->
            <view class="avatar-list d-flex">
              <block v-for="item in truncatedAvatarList" :key="item.userId">
                <view class="avatar-item" :class="{ 'team-leader': item.isLeader === 1 }">
                  <avatar width="100rpx" height="100rpx" :nick-name-prop="item.userId" :user-icon-prop="item.userIcon"></avatar>
                </view>
              </block>
              <!--								空位占位-->
              <view class="avatar-item placeholder"></view>
              <view class="avatar-item placeholder" v-if="teamInfo.lackNum > 1"></view>
            </view>
            <view class="tips">*若拼团不成功，所支付金额全部返还</view>
          </view>
        </view>
        <view class="team-member-count-price">
          {{ `${teamInfo.commodityGroupBuy.personNum}人团，拼团价：￥${numberUtils.fenToYuan(teamInfo.commodityGroupBuy.price)}` }}
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.choose-team-member-count-popup {
  border-radius: 30rpx 30rpx 0 0;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  overflow: hidden;
  > .content {
    > .info {
      color: #63676b;
      .title {
        font-size: 32rpx;
      }
      .content {
        margin-top: 4rpx;
        display: flex;
        align-items: center;
        font-size: 30rpx;
        .icon {
          width: 30rpx;
          height: 30rpx;
          margin: 0 3rpx;
        }
        .text {
          width: max-content;
        }
      }
    }
  }
}
.popup-content {
  background: var(--background-color);
  > .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #eeeeee;
    padding: 20rpx 30rpx;
    .close-btn {
      font-size: 32rpx;
    }
    .primary-btn {
      background: #f06220;
      color: white;
      font-size: 32rpx;
      padding: 10rpx 40rpx;
      border-radius: 31rpx;
    }
  }
  > .content {
    padding: 20rpx 30rpx;
    > .block {
      margin-top: 30rpx;
      .title {
        font-size: 36rpx;
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;
        .icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
        }
      }
      .status-text {
        font-size: 32rpx;
        .number {
          color: #e83030;
        }
      }
      .avatar-list {
        margin-top: 20rpx;
        padding-bottom: 30rpx;
        .avatar-item {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          &:not(:last-child) {
            margin-right: 20rpx;
          }
          &.placeholder {
            border: 2rpx solid rgba(187, 187, 187, 1);
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &.placeholder::after {
            content: "?";
            font-size: 50rpx;
            color: rgba(187, 187, 187, 1);
          }
          &.team-leader {
            position: relative;
          }
          &.team-leader::after {
            position: absolute;
            width: 90rpx;
            height: 40rpx;
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30rpx;
            color: white;
            content: "团长";
            background: #f2a249;
            bottom: -20rpx;
            left: 50%;
            transform: translateX(-50%);
            z-index: 999;
          }
        }
      }
      .tips {
        margin-top: 30rpx;
        color: #63676b;
        font-size: 30rpx;
      }
    }
    .team-member-count-price {
      margin-top: 50rpx;
      color: #63676b;
      font-size: 30rpx;
      text-align: right;
    }
  }
}
</style>
